<template>
  <section class="am-padding-horizontal-sm am-padding-vertical am-text-center panel-style panel-pos"
  @mouseleave="operPanel">
    <div class="am-g">
      <!-- 头像 -->
      <div class="am-u-sm-12">
        <div class="dsg-main am-margin-bottom">
          <img v-lazy="headimgPath" class="am-img-responsive am-circle am-center" alt="">
          <!-- <img :src="headimgPath" class="am-img-responsive am-circle am-center" alt=""> -->
          <div class="am-text-lg">{{ dsgName }}</div>
          <div class="am-link-muted">{{ place }}</div>
        </div>
      </div>

      <!-- 信息体1 -->
      <div class="am-u-sm-5">
        <div>作品数量</div>
        <span class="num am-inline-block">{{ worksNum }}</span>
      </div>
      <div class="am-u-sm-7">
        <p>{{ storeName }}</p>
      </div>

      <!-- 信息体2 -->
      <!-- <div class="am-u-sm-6">
        <am-button :block="true">xxx</am-button>
      </div>
      <div class="am-u-sm-6">
        <am-button :block="true">xxx</am-button>
      </div> -->

    </div>
  </section>
</template>

<script>
export default {
  name: 'dsg-overview',
  props: ['headimgPath', 'dsgName', 'place', 'worksNum', 'storeName'],
  methods: {
    operPanel() {
      this.$emit('operPanel');
    }
  }
}
</script>

<style lang="less" scoped>
.dsg-main {
  img { max-width: 80px; max-height: 80px; }
}

.num {
  color: #333;
  font-weight: 600;
  line-height: 21px;
  margin-bottom: 1rem;
}

.panel-style {
  position: absolute;
  border-radius: 5px;
  z-index: 1111;
  background: #fff;
  box-shadow: 2px 6px 15px rgba(0,0,0,.15);
  &:after {// 倒三角形状
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    bottom: -10px;
    left: 20px;
    box-sizing: border-box;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #fff #fff;
    -webkit-transform-origin: 0 0;
    -webkit-transform: rotate(-46deg);
    transform-origin: 0 0;
    transform: rotate(-46deg);
    box-shadow: -3px 2px 2px rgba(255,255,255,.05);
  }

}

.panel-pos {
  position: absolute;
  bottom: 50px;
  // top: -1.2rem;
  left: 1.2rem;
  right: 6rem;
}
</style>